<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>TMDb 电影数据分析</title>

    <!-- CSS样式 -->
    <style>
        /* 隐藏滚动条 */
        ::-webkit-scrollbar {
            display: none;
        }

        /* 自定义字体 */
        @font-face {
            font-family: "Ubuntu Condensed";
            src: url("static/UbuntuCondensed-Regular.ttf");
        }

        /* 设置盒模型为border-box */
        * {
            box-sizing: border-box;
        }

        /* 设置整体页面样式 */
        html,
        body {
            font-family: 'Ubuntu Condensed'; /* 使用自定义字体 */
            height: 100%;
            margin: 0;
            color: rgba(0, 0, 0, 0.85);
            background-color: rgb(252, 246, 229);
        }

        /* 设置容器样式 */
        .container {
            width: 65%; /* 宽度占比 */
            margin: 0 auto; /* 水平居中 */
        }

        /* 标题样式 */
        h2 {
            color: rgba(0, 0, 0, 0.75);
        }

        h2 > small {
            color: rgba(0, 0, 0, 0.45);
        }

        /* 图表组样式 */
        .chart-group {
            width: 100%; /* 宽度100% */
            height: 610px; /* 固定高度 */
            position: relative;
        }

        /* 关键词样式 */
        .keywords {
            margin-top: -70px; /* 上边距负值使得标题位置上移 */
            padding: 96px; /* 内边距控制关键词位置 */
        }

        /* 图表框架样式 */
        .frame {
            width: 100%; /* 宽度100% */
            height: 600px; /* 固定高度 */
        }
    </style>
</head>

<body>
<div class="container">
    <!-- 标题 -->
    <h1 style="font-size: 40px;"># TMDb电影数据分析 <br> <small style="font-size: 55%;color: rgba(0,0,0,0.65);">>
        基于Spark的大数据处理技术</small></h1>
    <hr>

    <!-- 第一部分：概览 -->
    <h1 style="font-size: 30px;color: #404040;">一、概览</h1>

    <!-- 图表1：TMDb电影类型分布 -->
    <div class="chart-group">
        <h2>- TMDb电影类型分布 <br> <small style="font-size: 72%;">>
            该图比较了TMDb中不同类型电影的比例分布，可以看出大部分电影类型是剧情片。</small></h2>
        <iframe src="genres.html" class="frame" frameborder="0"></iframe>
    </div>
    <br>

    <!-- 图表2：TMDb电影关键词分布 -->
    <div class="chart-group">
        <h2>- TMDb电影关键词分布 (仅显示前100个) <br> <small style="font-size: 72%;">>
            该图为TMDb电影的关键词云图，最常见的关键词是“女导演”。</small></h2>
        <iframe src="keywords.html" class="keywords frame" frameborder="0"></iframe>
    </div>
    <br>

    <!-- 图表3：TMDb电影预算分布 -->
    <div class="chart-group">
        <h2>- TMDb电影预算分布（仅显示前10个） <br> <small style="font-size: 72%;">>
            该图显示了TMDb电影的预算分布情况（仅显示前10个），大部分电影的预算约为2000万美元。</small></h2>
        <iframe src="budget.html" class="frame" frameborder="0"></iframe>
    </div>
    <br>

    <!-- 图表4：TMDb电影时长分布 -->
    <div class="chart-group">
        <h2>- TMDb电影时长分布（仅显示评分数量大于等于100的结果） <br> <small style="font-size: 72%;">>
            该图显示了TMDb电影的时长分布情况（仅显示评分数量大于等于100的结果），大部分电影的时长约为90分钟。</small></h2>
        <iframe src="runtime.html" class="frame" frameborder="0"></iframe>
    </div>
    <br>

    <!-- 图表5：TMDb电影数量最多的公司 -->
    <div class="chart-group">
        <h2>- TMDb电影数量最多的公司（前10个） <br> <small style="font-size: 72%;">>
            该图显示了在TMDb上制作电影数量最多的前10个公司，大部分电影由华纳兄弟公司制作。</small></h2>
        <iframe src="company_count.html" class="frame" frameborder="0"></iframe>
    </div>
    <br>

    <!-- 图表6：TMDb电影使用最多的语言 -->
    <div class="chart-group">
        <h2>- TMDb电影使用最多的语言（前10个） <br> <small style="font-size: 72%;">>
            该图显示了在TMDb上使用最多的前10种语言，最常用的语言是英语。</small></h2>
        <iframe src="lang.html" class="keywords frame" frameborder="0"></iframe>
    </div>

    <!-- 第二部分：关联分析 -->
    <h1 style="font-size: 30px;">二、关联分析</h1>

    <!-- 图表7：预算与评分的关系 -->
    <div class="chart-group">
        <h2>- 预算和评分的关系 <br> <small style="font-size: 72%;">>
            该图显示了TMDb电影预算和评分之间的关系（已过滤评分太少和没有预算信息的影片），《肖申克的救赎》是评分最高的电影，但在TMDb上的预算并不高。</small>
        </h2>
        <iframe src="budget_vote.html" class="frame" frameborder="0"></iframe>
    </div>
    <br>

    <!-- 图表8：上映日期与评分的关系 -->
    <div class="chart-group">
        <h2>- 上映日期和评分的关系 <br> <small style="font-size: 72%;">>
            该图显示了TMDb电影上映日期和评分之间的关系（已过滤评分太少和没有上映日期信息的影片），早期的电影评分较高。</small>
        </h2>
        <iframe src="date_vote.html" class="frame" frameborder="0"></iframe>
    </div>
    <br>

    <!-- 图表9：热度与评分的关系 -->
    <div class="chart-group">
        <h2>- 热度和评分的关系 <br> <small style="font-size: 72%;">>
            该图显示了TMDb电影热度和评分之间的关系（已过滤评分太少和没有热度信息的影片），即使《小黄人大眼萌》只得到了6.4的评分，但它是最受欢迎的电影。</small>
        </h2>
        <iframe src="pop_vote.html" class="frame" frameborder="0"></iframe>
    </div>
    <br>
    <!-- 图表10：公司电影数量与评分的关系 -->
    <div class="chart-group">
        <h2>- 公司制作电影数量和评分的关系 <br> <small style="font-size: 72%">>
            该图显示了TMDb上公司制作电影数量和评分之间的关系（已过滤评分太少和没有热度信息的影片），数量较多的公司通常获得平均分数。</small>
        </h2>
        <iframe src="movies_vote.html" class="frame" frameborder="0"></iframe>
    </div>
    <br>

    <!-- 图表11：预算与收入的关系 -->
    <div class="chart-group">
        <h2>- 预算和收入的关系 <br> <small style="font-size: 72%">>
            该图显示了TMDb电影的预算和收入之间的关系（已过滤评分太少和没有预算和收入信息的影片），《阿凡达》是利润最高的电影。</small>
        </h2>
        <iframe src="budget_revenue.html" class="frame" frameborder="0"></iframe>
    </div>
</div>

<!-- 修复Safari中iframe窗口高度为0的问题 -->
<script>document.body.clientHeight;</script>
</body>

</html>